<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 300px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box2"></div>
    <script>

        // 实现拖拽功能 
        // let boxEle = document.querySelector(".box");
        // boxEle.onmousedown = function (e) {
        //     console.log(this.clinetX);
        //     let x = e.clientX - this.offsetLeft;
        //     let y = e.clientY - this.offsetTop;
        //     // console.log(x,y);
        //     this.onmousemove = function (e) {
        //         let xx = e.clientX;
        //         let yy = e.clientY;
        //         this.style.left = xx - x + "px";
        //         this.style.top = yy - y + "px";
        //     }
        // }

        // boxEle.onmouseup = function () {
        //     this.onmousemove = "";
        // }


        class Drag {
            constructor(boxEle) {
                this.boxEle = boxEle;
                this.downFn();
                this.upFn();
            }
            downFn() {
                let that = this;
                this.boxEle.onmousedown = function (e) {
                    let x = e.clientX - this.offsetLeft;
                    let y = e.clientY - this.offsetTop;
                    // console.log(x,y);
                    that.moveFn(x, y);
                }
            }
            moveFn(x, y) {
                this.boxEle.onmousemove = function (e) {
                    let xx = e.clientX;
                    let yy = e.clientY;
                    this.style.left = xx - x + "px";
                    this.style.top = yy - y + "px";
                }
            }
            upFn() {
                this.boxEle.onmouseup = function () {
                    this.onmousemove = "";
                }
            }
        }
        let boxEle = document.querySelector(".box");
        let drag1 = new Drag(boxEle);



        class SonDrag extends Drag{
            moveFn(x, y) {
                this.boxEle.onmousemove = function (e) {
                    let xx = e.clientX;
                    let yy = e.clientY;

                    let xdis = xx - x;
                    let ydis = yy - y;
                    // 左边的范围
                    if(xdis<0){
                        xdis = 0;
                    }

                    // 右边的边界 
                    if(xdis>(window.innerWidth - this.offsetWidth)){
                        xdis = window.innerWidth - this.offsetWidth;
                    }


                    if(ydis<0){
                        ydis = 0;
                    }

                    if(ydis>(window.innerHeight - this.offsetHeight)){
                        ydis = window.innerHeight - this.offsetHeight;
                    }


                    this.style.left = xdis + "px";
                    this.style.top = ydis + "px";
                }
            }
        }

        let boxEle2= document.querySelector(".box2");
        let drag2 = new SonDrag(boxEle2);




       



    </script>
</body>

</html>